<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Contact</title>
</head>
<style>
</style>

<body>
    <div id="app">
        <div class="top">
            <span>任务分配系统——任务分配</span>
            <a href="http://localhost:8080/ManageSystem/Boss/main.html">首页</a>
            <a href="http://localhost:8080/ManageSystem/Boss/center.html">个人中心</a>
            <img :src="imageUrl" onerror="this.src='../profilephoto/default.jpg'" alt="头像" style="height:30px;width:30px;border-radius: 50%">
            <span>{{user.name}}</span>
            <el-button @click="exit">退出登录</el-button>
        </div>
        <div class="sidebar">
            <ul>
                <li><a href="http://localhost:8080/ManageSystem/Boss/main.html">当前任务</a></li>
                <li><a href="http://localhost:8080/ManageSystem/Boss/taskArchive.html">归档任务</a></li>
                <li><a href="http://localhost:8080/ManageSystem/Boss/contact.html">成员管理</a></li>
                <li><a href="javascript:;">任务分配</a></li>
                <li><a href="http://localhost:8080/ManageSystem/Boss/issueNotice.html">发布公告</a></li>
                <li><a href="http://localhost:8080/ManageSystem/Boss/notice.html">公告</a></li>
            </ul>
        </div>
        <div class="contact">
            <h3>分配任务</h3>
            <div class="tip"></div>
            <el-form :model="Task" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="任务名称" prop="title">
                    <el-input v-model="Task.title"></el-input>
                </el-form-item>
                <el-form-item label="任务简介" prop="briefing">
                    <el-input v-model="Task.briefing"></el-input>
                </el-form-item>
                <el-form-item label="任务详情" prop="detail">
                    <el-input type="textarea" v-model="Task.detail"></el-input>
                </el-form-item>
                <el-form-item label="开始时间" required>
                    <el-col :span="11">
                        <el-form-item prop="date1">
                            <el-date-picker
                                    v-model="startDate"
                                    type="datetime"
                                    placeholder="选择日期时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="结束时间" required>
                    <el-col :span="11">
                        <el-form-item prop="date2">
                            <el-date-picker
                                    v-model="finishDate"
                                    type="datetime"
                                    placeholder="选择日期时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="参与成员" prop="person">
                    <el-table
                            :data="departmentData"
                            height="250"
                            @select="selectionRow"
                            @select-all="selectAll">
                        <el-table-column
                                fixed
                               type="selection"
                                label="是否参与"
                                width="80">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="部门名称"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="principal"
                                label="负责人"
                                width="120">
                        </el-table-column>
                    </el-table>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submit">发布任务</el-button>
                    <el-button @click="resetForm('Task')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</body>
<script src="../js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script>

    new Vue({
        el: "#app",
        mounted() {
            this.checkSession();
        },
        methods: {
            checkSession() {
                axios({
                    method: "get",
                    url: "http://localhost:8080/ManageSystem/user/checkSession"
                }).then(resp => {
                    if (resp.data === null) {
                        alert("请进行登录再操作")
                        window.location.href = "http://localhost:8080/ManageSystem/login.html";
                    }
                    else if(resp.data.position ==='成员'){
                        alert("权限不足，请从官方入口尝试再次登入")
                        window.location.href = "http://localhost:8080/ManageSystem/login.html";
                    }
                    else{
                        this.user = resp.data;
                        this.imageUrl = "../profilephoto/"+this.user.userId+".jpg";
                        this.selectUsers();
                        this.selectDepartment();
                    }
                })
            },
            selectUsers(){
                axios({
                    method: "get",
                    url: "http://localhost:8080/ManageSystem/department/selectAllDepartment"
                }).then(resp => {
                    this.departmentData = resp.data;
                })
            },
            exit(){
                axios({
                    method: "get",
                    url: "http://localhost:8080/ManageSystem/user/delectSession",
                }).then(resp=>{
                    this.checkSession()
                })
            },
            selectDepartment(){
                axios({
                    method: "get",
                    url: "http://localhost:8080/ManageSystem/department/selectDepartment",
                }).then(resp=>{
                    this.department = resp.data;
                })
            },
            submit(){
                this.Task.taskId = this.user.departmentId;
                const tip = document.querySelector(".tip")
                if(this.startDate == null || this.finishDate == null || this.startDate == "" || this.finishDate == ""){
                    tip.innerHTML="请将时间输入完整"
                    return;
                }
                const startTime = this.startDate.getTime();
                const finishTime = this.finishDate.getTime();
                if(finishTime<startTime){
                    tip.innerHTML="结束时间应晚于开始时间"
                    return
                }
                if(this.departments.length === 0) {
                    document.querySelector(".tip").innerHTML="请至少选择一位成员执行任务"
                    return;
                }
                startMonth = this.startDate.getMonth()+1
                finishMonth = this.finishDate.getMonth()+1
                this.Task.startTime = this.startDate.getFullYear() + "-" + startMonth + "-" + this.startDate.getDate() + " " + this.startDate.getHours() + ":" + this.startDate.getMinutes() + ":" + this.startDate.getSeconds();
                this.Task.finishTime = this.finishDate.getFullYear() + "-" + finishMonth + "-" + this.finishDate.getDate() + " " + this.finishDate.getHours() + ":" + this.finishDate.getMinutes() + ":" + this.finishDate.getSeconds();
                axios({
                    method: "post",
                    url: "http://localhost:8080/ManageSystem/department/addTotalDepartmentTask",
                    data:this.Task
                }).then(resp=>{
                    this.Assign(resp.data);
                })
            },
            Assign(val){
                axios({
                    method: "post",
                    url: "http://localhost:8080/ManageSystem/department/assignDepartmentTask?taskId="+val,
                    data:this.departments
                }).then(resp=>{
                    alert("创建成功")
                })
            },
            selectionRow(selection, row){
                this.selectAll(selection);
            },

            selectAll(selection){
                this.departments=[];
                for(let i = 0;i<selection.length;i++){
                    this.departments.push(selection[i].departmentId)
                }
                console.log(this.departments)
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
        },
        data() {
            return{
                user:{
                    userId:'',
                    departmentId:'',
                    name:'',
                    password:'',
                    position:'',
                    email:'',
                },
                department:{
                    departmentId:'',
                    name:'',
                    principal:'',//负责人
                    manageCode:'',
                    time:'',
                },
                departmentData:[{
                    departmentId:'',
                    name:'',
                    principal: '',
                }],
                imageUrl: '',
                Task: {
                    taskId:'',
                    title:'',
                    briefing:'',
                    detail:'',
                    state:'0',
                    startTime:'',
                    finishTime:'',
                },
                startDate:'',
                finishDate:'',
                departments:[],
                rules: {
                    title: [
                        { required: true, message: '请输入任务名称', trigger: 'blur' },
                        { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                    ],
                },
            }
        }

    })
</script>
</html>